﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>木鱼后台管理系统</title>


<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/layer.js"></script>

	<!--    添加vue和axios支持-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style type="text/css">
#container {
	margin-top: -20px;
	margin-left: 10px;
}
</style>
</head>
<body>
	<div id="container" class="col-sm-12">
		<div class="page-header">
			<h2>新闻管理</h2>
		</div>
<!--		<form action="">-->
<!--			<div class="row">-->
<!--				<div class="col-xs-6 col-sm-3">-->
<!--					<div class="row">-->
<!--						<div class="col-xs-8 col-sm-3">-->
<!--							<span class="btn btn-default">类型名称</span>-->
<!--						</div>-->
<!--						<div class="col-xs-3 col-sm-8">-->
<!--							<input  id="typeName" type="text"  class="form-control" onblur="getNews()" />-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="col-xs-6 col-sm-2">-->
<!--					<div class="row">-->
<!--						<div class="col-xs-8 col-sm-3">-->
<!--							<span class="btn btn-default">状态</span>-->
<!--						</div>-->
<!--						<div class="col-xs-3 col-sm-8">-->
<!--							<select id="typeStatus"  class="form-control" onchange="getNews()">-->
<!--								<option value="">请选择</option>-->
<!--								<option value="1">商用</option>-->
<!--								<option value="2">下线</option>-->
<!--							</select>-->
<!--						</div>-->
<!--					</div>-->

<!--				</div>-->
<!--				<div class="col-xs-6 col-sm-4">-->
<!--					<input type="button" class="btn btn-primary"  value="查询" />-->
<!--				</div>-->
<!--			</div>-->
<!--		</form>-->
		<div class="row">&nbsp;</div>
		<div class="row">
			<div class="col-xs-6 col-sm-4">
				<a class="btn btn-primary" href="javascript:void(0);" onclick="addNews()">
					<span class="glyphicon glyphicon-plus"></span>
					新增
				</a>
				<a class="btn btn-danger"  href="javascript:void(0);" onclick="deleteNews()" >
					<span class="glyphicon glyphicon-trash"></span>删除
				</a>
			</div>
		</div>

		<div class="row">&nbsp;</div>
		<div class="row">
			<div class="col-xs-6 col-sm-11">
				<div class="table-responsive " style="vertical-align: middle;text-align: center;">
					<table id="searchTable" class="table table-bordered table-condensed ">
						<tr>
							<td><input  type="checkbox" id="all"  name="all" value="全选" onclick="selectOrDecAll(this)"/> 全选</td>
							<td>ID</td>
							<td>新闻标题</td>
							<td>新闻封面</td>
							<td>新闻描述</td>
							<td>日期</td>
							<td>链接</td>
							<td>操作</td>
						</tr>
							<tr v-for="news in newsList">
								<td><input type='checkbox'  :name="news.id" /></td>
								<td>{{news.id}}</td>
								<td>{{news.newsTitle}}</td>
								<td>
									<div>
										<img width="33" height="30"
											 :src="'/img/'+news.cover"
										/>
									</div>
								</td>
								<td>{{news.description}}</td>
								<td>{{formate(news.newsDate)}}</td>
								<td><a :href="news.newsHref" target="_blank">链接</a></td>
								<td><a class="btn btn-info" href="javascript:void(0);" :onclick="'openSessionForUpdate('+news.id+')'"> <span class="glyphicon glyphicon-pencil"></span>修改</a></td>
							</tr>
					</table>

<!--					<nav aria-label="Page navigation" v-if="totalPage !==0" >-->
<!--						<ul class="pagination">-->
<!--							<li v-if="pageNo != 1">-->
<!--								<a href="javascript:void(0);" :onclick="'getGameTypes(1)'" aria-label="Previous">-->
<!--									<span aria-hidden="true"  >&laquo;</span>-->
<!--								</a>-->
<!--							</li>-->
<!--							<li v-if="pageNo != 1" >-->
<!--								<a href="javascript:void(0);" :onclick="'getGameTypes('+(pageNo-1)+')'"  aria-label="Previous">-->
<!--									<span aria-hidden="true" >&lt;</span>-->
<!--								</a>-->
<!--							</li>-->
<!--							<li>-->
<!--								<a>{{pageNo}}</a>-->
<!--							</li>-->
<!--							<li  v-if="(pageNo != totalPage)||(totalPage==0) ">-->
<!--								<a href="javascript:void(0);"  :onclick="'getGameTypes('+(pageNo+1)+')'"  aria-label="Next">-->
<!--									<span aria-hidden="true" >&gt;</span>-->
<!--								</a>-->
<!--							</li>-->
<!--							<li  v-if="pageNo != totalPage">-->
<!--								<a  href="javascript:void(0);" :onclick="'getGameTypes('+totalPage+')'" aria-label="Previous">-->
<!--									<span aria-hidden="true" >&raquo;</span>-->
<!--								</a>-->
<!--							</li>-->
<!--						</ul>-->
<!--					</nav>-->
				</div>
			</div>
		</div>


	</div>


</body>
<script type="text/javascript">
	let newsVue = new Vue({
		el:'#container',
		data:{
			newsList:"",
			pageNo:"",
			totalPage:""
		},
		methods:{
			formate: function (date) {
				var date = new Date(date);
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				return year+"-"+month+"-"+day;
			}
		}
	});

	function getNews(pageNo) {
		Vue.http.post('getNews',{'pageNo':pageNo},{emulateJSON:true})
				.then((res) => {
					newsVue.newsList = res.data.data;
				},(error)=>{
					console.log(error);
				});
	}



	function deleteNews() {
		let input = $('input[type=checkbox]:checked');
		let needDel = new Array();
		for (let i = 0; i < input.length; i++) {
			if ($(input[i]).attr("name")!="all"){
				needDel.push($(input[i]).attr("name"));
			}
		}
		if (needDel.length==0){
			layer.msg("未选中新闻");
			return;
		}
		Vue.http.post('deleteNews',JSON.stringify(needDel))
				.then((res)=>{
					getNews(1);
					uncheckAll();
					layer.msg(res.data.message);
				},(error)=>{
					console.log(error);
				})
	}


	function uncheckAll() {
		$('input[type=checkbox]:checked').each(function () {
			$(this).prop("checked",false);
		});
	}

	function selectOrDecAll(i) {
		let inputSelect = $(i);
		if (inputSelect.is(':checked')){
			$('input[type=checkbox]').each(function () {
				if ($(this).attr("name")!="all"){
					$(this).prop("checked",true);
				}
			});
		}else {
			$('input[type=checkbox]').each(function () {
				if ($(this).attr("name")!="all"){
					$(this).prop("checked",false);
				}
			});
		}
	}

	function addNews() {
		layer.open({
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: true,
			content: '/addNews'
		});
	}


	//弹出页面
	function openSessionForUpdate(newsId){
		layer.open({
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: true,
			content: '/updateNews'+'/'+newsId
		});
	}
	$(document).ready(function () {
		getNews(1);
	});
</script>
<style>
td{
	vertical-align: middle !important;
}
</style>
</html>
